<template>
    <div id="subRbpApp">
        <!-- <router-view /> -->
        <template v-if="!isQiankun">
            <div :class="classObj" class="app-wrapper">
                <div v-if="classObj.mobile && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
                <sidebar id="sidebar-container" class="sidebar-container" />
                <div :class="{ hasTagsView: showTagsView }" class="main-container">
                    <div class="fixed-header">
                        <navbar />
                        <tags-view v-if="showTagsView" />
                    </div>
                    <app-main />
                </div>
            </div>
        </template>
        <template v-else>
            <app-main />
        </template>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Sidebar from '@/views/layout/components/Sidebar/index.vue';
import Navbar from '@/views/layout/components/Navbar/index.vue';
import TagsView from '@/views/layout/components/TagsView/index.vue';
import ResizeMixin from '@/views/layout/mixin/resize';
import AppMain from '@/views/layout/components/AppMain.vue';
import { Getter } from 'vuex-class';

@Component({
    name: 'AppVue',
    components: {
        Sidebar,
        Navbar,
        TagsView,
        AppMain
    }
})
export default class App extends Vue {
    time: any = null;
    @Getter('sidebar') sidebar;
    @Getter('device') device;
    @Getter('isQiankun') isQiankun;

    get classObj() {
        return {
            hideSidebar: !this.sidebar.opened,
            openSidebar: this.sidebar.opened,
            withoutAnimation: this.sidebar.withoutAnimation,
            mobile: this.device === 'mobile'
        };
    }
    get showTagsView() {
        return this.$store.state.settings.showTagsView;
    }
    mounted() {
        this.autoResize();
    }
    private handleClickOutside() {
        this.$store.dispatch('app/closeSideBar', { withoutAnimation: false });
    }
    autoResize() {
        // console.log('autoResize已挂载');
        window.addEventListener('resize', () => {
            clearTimeout(this.time);
            //   this.$store.commit('SETVIEWlOADING',true);
            this.time = setTimeout(() => {
                this.$store.commit('app/SETHEIGHT', window.innerHeight);
                this.$nextTick(() => {
                    //   this.$store.commit('SETVIEWlOADING',false);
                });
            }, 100);
        });
    }
}
</script>
<style lang="scss" scoped>
@import 'src/styles/variables.scss';
.fixed-header {
    // position: fixed;
    // top: 0;
    // right: 0;
    // z-index: 9;
    // width: calc(100% - #{$sideBarWidth});
    // transition: width 0.28s;
    position: fixed;
    top: 0;
    z-index: 2000;
    width: calc(100% - #{$sideBarWidth});
    transition: width 0.28s;
}

.hideSidebar {
    .main-container {
        margin-left: 54px;
    }

    .sidebar-container {
        width: 54px !important;
    }

    .fixed-header {
        width: calc(100% - 54px);
    }
}

/* for mobile response 适配移动端 */
.mobile {
    .main-container {
        margin-left: 0px;
    }

    .sidebar-container {
        transition: transform 0.28s;
        width: $sideBarWidth !important;
    }

    &.openSidebar {
        position: fixed;
        top: 0;
    }

    &.hideSidebar {
        .sidebar-container {
            pointer-events: none;
            transition-duration: 0.3s;
            transform: translate3d(-$sideBarWidth, 0, 0);
        }
    }

    .fixed-header {
        width: 100%;
    }
}

.withoutAnimation {
    .main-container,
    .sidebar-container {
        transition: none;
    }
}
</style>
